<template>
  <div class="tw-libpagination">
    <el-pagination
      v-show="total.total>pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout ? layout : 'total, prev, pager, next, jumper'"
      :total="total.total">
      <template v-if="layout && layout.includes('slot')">
        <span :style="{color:color,fontWeight:400}" v-if="showSimple">{{currentPage}} / {{Math.ceil(parseInt(total.total) / parseInt(pageSize))}}</span>
      </template>
    </el-pagination>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'pagination',

  props,

  data() {
    return {
      currentPage: this.value
    }
  },

  computed: {
    style () {
      return {
        color: this.color,
        pgColor: this.pgColor,
        btnBgColor: this.btnBgColor,
        activeColor: this.activeColor,
        activeBg: this.activeBg,
        btnDisabledBgColor: this.btnDisabledBgColor,
        btnDisabledColor: this.btnDisabledColor,
        inputBgColor: this.inputBgColor,
        inputColor: this.inputColor,
        alignType: this.alignType,
        InputBorderColor: this.InputBorderColor,
        lineHeight: this.lineHeight,
        fontSize: this.fontSize,
        pgFontSize: this.pgFontSize,
        pgFontWeight: this.pgFontWeight,
        custBtn: this.custBtn,
        btnBdColor: this.btnBdColor,
        btnColor: this.btnColor,
        btnFontSize: this.btnFontSize,
        btnDisabledBdColor: this.btnDisabledBdColor
      }
    }
  },

  methods: {
    handleSizeChange () {

    },

    resetCurrentPage () {
      this.handleCurrentChange(1)
    },

    handleCurrentChange (pageNo) {
      // this.currentPage = pageNo
      this.$emit('input', pageNo)
      this.$emit('change', pageNo)
    },

    setStyle () {
      // ::root 表示组件根元素选择器
      let style = `
        ::root.tw-libpagination {
          justify-content: ${this.alignType};
        }

        ::root .el-pagination,
        ::root .el-pagination__total,
        ::root .el-pagination__jump {
          color: ${this.color};
          font-size: ${this.fontSize ? this.fontSize : '13px'};
        }

        ::root .el-pagination button,
        ::root .el-pagination span:not([class*=suffix]) {
          font-size: ${this.fontSize ? this.fontSize : '13px'};
          height: ${this.lineHeight ? this.lineHeight : '28px'};
          line-height: ${this.lineHeight ? this.lineHeight : '28px'};
        }
        ::root .el-pagination .el-pager li {
          height: ${this.lineHeight ? this.lineHeight : '28px'};
          line-height: ${this.lineHeight ? this.lineHeight : '28px'};
        }

        ::root .el-pagination.is-background .btn-next,
        ::root .el-pagination.is-background .btn-prev,
        ::root .el-pagination.is-background .el-pager li {
          color: ${this.pgColor};
          background-color: ${this.btnBgColor};
          font-size: ${this.pgFontSize ? this.pgFontSize : '13px'};
          font-weight: ${this.pgFontWeight ? this.pgFontWeight : '700'};
          border-radius: ${this.pgBorderRadius ? this.pgBorderRadius : '2px'};
        }

        ::root .el-pagination.is-background .btn-next.disabled,
        ::root .el-pagination.is-background .btn-next:disabled,
        ::root .el-pagination.is-background .btn-prev.disabled,
        ::root .el-pagination.is-background .btn-prev:disabled,
        ::root .el-pagination.is-background .el-pager li.disabled {
          color: ${this.btnDisabledColor};
          background-color: ${this.btnDisabledBgColor};
          font-size: ${this.fontSize ? this.fontSize : '13px'};
        }

        ::root .el-pager li.active,
        ::root .el-pagination.is-background .el-pager li:not(.disabled).active {
          color: ${this.activeColor};
          background-color: ${this.activeBg};
          font-size: ${this.fontSize ? this.fontSize : '13px'};
        }

        ::root .el-input__inner {
          color: ${this.inputColor};
          background-color: ${this.inputBgColor};
          border-color: ${this.InputBorderColor};
          font-size: ${this.fontSize ? this.fontSize : '13px'};
        }

        ::root > .tw-libname-text {
          color: ${this.textColor};
          font-size: ${this.fontSize ? this.fontSize : '13px'};
        }
      `
      if (this.custBtn) {
        style += `
          ::root .el-pagination.is-background .btn-next,
          ::root .el-pagination.is-background .btn-prev {
            color: ${this.btnColor};
            border: 1px solid ${this.btnBdColor};
            background-color: ${this.btnBgColor};

          }
          ::root .el-pagination.is-background .btn-next.disabled,
          ::root .el-pagination.is-background .btn-next:disabled,
          ::root .el-pagination.is-background .btn-prev.disabled,
          ::root .el-pagination.is-background .btn-prev:disabled {
            color: ${this.btnDisabledColor};
            background-color: ${this.btnDisabledBgColor};
            border: 1px solid ${this.btnDisabledBdColor};
          }
          ::root .el-pagination .btn-next .el-icon,
          ::root .el-pagination .btn-prev .el-icon {
            font-size: ${this.btnFontSize};
          }

          ::root .el-pagination .btn-next,
          ::root .el-pagination .btn-prev {
            width: ${this.btnWidth ? this.btnWidth : null};
            height: ${this.lineHeight ? this.lineHeight : '28px'};
            line-height: ${this.lineHeight ? this.lineHeight : '28px'};
          }

          // ::root .el-pagination__total,
          // ::root .el-pagination__jump {
          //   color: ${this.totalColor};
          //   font-size: ${this.totalFontSize ? this.totalFontSize : '13px'};
          // }
        `
      }
      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    }
  },

  mounted () {
    window.aaa = this
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    },

    resetVar: {
      deep: true,
      handler () {
        this.handleCurrentChange(1)
      }
    },

    value () {
      this.currentPage = this.value
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
